<!-- views/Analysis.vue -->
<template>
  <div class="analysis-container">
    <el-card class="data-config-card">
      <template #header>
        <div class="card-header">
          <span>数据配置</span>
          <el-button type="primary" @click="refreshData">刷新数据</el-button>
        </div>
      </template>
      
      <el-form :model="configForm" label-width="80px">
        <el-form-item label="X轴字段">
          <el-select v-model="configForm.xField" placeholder="请选择X轴字段">
            <el-option
              v-for="field in availableFields"
              :key="field"
              :label="field"
              :value="field"
            />
          </el-select>
        </el-form-item>
        
        <el-form-item label="Y轴字段">
          <el-select v-model="configForm.yField" placeholder="请选择Y轴字段">
            <el-option
              v-for="field in availableFields"
              :key="field"
              :label="field"
              :value="field"
            />
          </el-select>
        </el-form-item>
        
        <el-form-item label="图表类型">
          <el-radio-group v-model="configForm.chartType">
            <el-radio-button label="bar">柱状图</el-radio-button>
            <el-radio-button label="line">折线图</el-radio-button>
            <el-radio-button label="pie">饼图</el-radio-button>
            <el-radio-button label="scatter">散点图</el-radio-button>
            <el-radio-button label="number">数字指标</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </el-card>

    <div class="charts-container">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card class="chart-card">
            <template #header>
              <div class="card-header">
                <span>柱状图</span>
              </div>
            </template>
            <div ref="barChart" class="chart" style="height: 300px;"></div>
          </el-card>
        </el-col>
        
        <el-col :span="12">
          <el-card class="chart-card">
            <template #header>
              <div class="card-header">
                <span>折线图</span>
              </div>
            </template>
            <div ref="lineChart" class="chart" style="height: 300px;"></div>
          </el-card>
        </el-col>
      </el-row>
      
      <el-row :gutter="20" style="margin-top: 20px;">
        <el-col :span="12">
          <el-card class="chart-card">
            <template #header>
              <div class="card-header">
                <span>饼图</span>
              </div>
            </template>
            <div ref="pieChart" class="chart" style="height: 300px;"></div>
          </el-card>
        </el-col>
        
        <el-col :span="12">
          <el-card class="chart-card">
            <template #header>
              <div class="card-header">
                <span>散点图</span>
              </div>
            </template>
            <div ref="scatterChart" class="chart" style="height: 300px;"></div>
          </el-card>
        </el-col>
      </el-row>
      
      <el-row style="margin-top: 20px;">
        <el-col :span="24">
          <el-card class="chart-card">
            <template #header>
              <div class="card-header">
                <span>数字指标</span>
              </div>
            </template>
            <div class="number-cards">
              <div 
                v-for="(value, key) in currentData" 
                :key="key" 
                class="number-card"
                v-if="Array.isArray(value)"
              >
                <div class="number-title">{{ key }}</div>
                <div class="number-value">{{ value[0] }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, computed } from 'vue'
import * as echarts from 'echarts'

// 图表引用
const barChart = ref(null)
const lineChart = ref(null)
const pieChart = ref(null)
const scatterChart = ref(null)

// 图表实例
let barChartInstance = null
let lineChartInstance = null
let pieChartInstance = null
let scatterChartInstance = null

// 配置表单
const configForm = ref({
  xField: '',
  yField: '',
  chartType: 'bar'
})

// 模拟数据 - 五份不同的数据
const mockData = [
  {
    "月份": ["1月", "2月", "3月", "4月", "5月"],
    "销售额": [120, 200, 150, 80, 70],
    "用户数": [100, 120, 180, 150, 130],
    "增长率": [0.12, 0.15, 0.08, -0.05, 0.03]
  },
  {
    "产品": ["产品A", "产品B", "产品C", "产品D", "产品E"],
    "销量": [320, 302, 301, 334, 390],
    "库存": [120, 132, 101, 134, 90],
    "利润率": [0.25, 0.30, 0.22, 0.28, 0.35]
  },
  {
    "地区": ["华东", "华南", "华北", "西南", "西北", "东北"],
    "销售额": [420, 320, 350, 280, 270, 230],
    "成本": [300, 250, 280, 200, 190, 180],
    "利润": [120, 70, 70, 80, 80, 50]
  },
  {
    "时间": ["08:00", "10:00", "12:00", "14:00", "16:00", "18:00"],
    "访问量": [820, 932, 901, 934, 1290, 1330],
    "转化率": [0.12, 0.15, 0.18, 0.14, 0.20, 0.22],
    "跳出率": [0.45, 0.42, 0.38, 0.40, 0.35, 0.32]
  },
  {
    "部门": ["研发", "市场", "销售", "客服", "人事", "财务"],
    "预算": [200, 150, 180, 120, 100, 130],
    "实际支出": [180, 160, 200, 110, 90, 120],
    "人员数": [50, 30, 45, 25, 15, 20],
    "平均薪资": [25.5, 22.8, 20.5, 18.2, 16.8, 24.3]
  }
]

// 当前数据索引
const currentDataIndex = ref(0)
// 当前数据
const currentData = ref(mockData[0])

// 可用字段
const availableFields = computed(() => {
  return Object.keys(currentData.value).filter(key => Array.isArray(currentData.value[key]))
})

// 初始化图表
const initCharts = () => {
  barChartInstance = echarts.init(barChart.value)
  lineChartInstance = echarts.init(lineChart.value)
  pieChartInstance = echarts.init(pieChart.value)
  scatterChartInstance = echarts.init(scatterChart.value)
  
  window.addEventListener('resize', () => {
    barChartInstance.resize()
    lineChartInstance.resize()
    pieChartInstance.resize()
    scatterChartInstance.resize()
  })
}

// 更新所有图表
const updateCharts = () => {
  updateBarChart()
  updateLineChart()
  updatePieChart()
  updateScatterChart()
}

// 更新柱状图
const updateBarChart = () => {
  const xField = configForm.value.xField || availableFields.value[0]
  const yField = configForm.value.yField || availableFields.value[1]
  
  const option = {
    title: {
      text: `${yField}柱状图`,
      left: 'center'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: currentData.value[xField]
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      name: yField,
      type: 'bar',
      data: currentData.value[yField],
      itemStyle: {
        color: '#5470c6'
      }
    }]
  }
  
  barChartInstance.setOption(option)
}

// 更新折线图
const updateLineChart = () => {
  const xField = configForm.value.xField || availableFields.value[0]
  const yField = configForm.value.yField || availableFields.value[1]
  
  const option = {
    title: {
      text: `${yField}折线图`,
      left: 'center'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: currentData.value[xField]
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      name: yField,
      type: 'line',
      data: currentData.value[yField],
      smooth: true,
      itemStyle: {
        color: '#91cc75'
      }
    }]
  }
  
  lineChartInstance.setOption(option)
}

// 更新饼图
const updatePieChart = () => {
  const xField = configForm.value.xField || availableFields.value[0]
  const yField = configForm.value.yField || availableFields.value[1]
  
  const data = currentData.value[xField].map((name, index) => ({
    name,
    value: currentData.value[yField][index] || 0
  }))
  
  const option = {
    title: {
      text: `${yField}饼图`,
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    series: [{
      name: yField,
      type: 'pie',
      radius: '60%',
      data: data,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }]
  }
  
  pieChartInstance.setOption(option)
}

// 更新散点图
const updateScatterChart = () => {
  const xField = configForm.value.xField || availableFields.value[0]
  const yField = configForm.value.yField || availableFields.value[1]
  
  const data = currentData.value[xField].map((xVal, index) => [
    xVal,
    currentData.value[yField][index] || 0
  ])
  
  const option = {
    title: {
      text: `${xField} vs ${yField}散点图`,
      left: 'center'
    },
    tooltip: {
      trigger: 'axis',
      formatter: function (params) {
        return `${xField}: ${params[0].value[0]}<br/>${yField}: ${params[0].value[1]}`
      }
    },
    xAxis: {
      type: 'category',
      name: xField,
      data: currentData.value[xField]
    },
    yAxis: {
      type: 'value',
      name: yField
    },
    series: [{
      type: 'scatter',
      data: data,
      symbolSize: function (data) {
        return Math.sqrt(data[1]) / 5 + 10;
      },
      itemStyle: {
        color: '#fac858'
      }
    }]
  }
  
  scatterChartInstance.setOption(option)
}

// 刷新数据
const refreshData = () => {
  currentDataIndex.value = (currentDataIndex.value + 1) % mockData.length
  currentData.value = mockData[currentDataIndex.value]
  
  // 重置选择的字段
  configForm.value.xField = ''
  configForm.value.yField = ''
  
  updateCharts()
}

// 监听数据变化
watch(currentData, updateCharts)
watch(() => [configForm.value.xField, configForm.value.yField], updateCharts)

onMounted(() => {
  initCharts()
  updateCharts()
})
</script>

<style scoped>
.analysis-container {
  padding: 20px;
}

.data-config-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart {
  width: 100%;
}

.number-cards {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.number-card {
  text-align: center;
  padding: 20px;
  margin: 10px;
  border-radius: 8px;
  background-color: #f5f7fa;
  min-width: 150px;
}

.number-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 10px;
}

.number-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}
</style>